<template>
  <div class="map-container">
    <div ref="mapRef" class="map"></div>
    <div class="control-panel">
      <div class="control-item">
        <label>样式类型：</label>
        <select v-model="styleType">
          <option value="circle">圆形</option>
          <option value="square">方形</option>
          <option value="triangle">三角形</option>
          <option value="star">五角星</option>
        </select>
      </div>
      <div class="control-item">
        <label>大小：</label>
        <input type="range" v-model="size" min="4" max="20" step="1" />
        <span>{{ size }}px</span>
      </div>
      <div class="control-item">
        <label>颜色：</label>
        <input type="color" v-model="color" />
      </div>
      <div class="point-count">
        总点数：{{ pointCount }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat, transform } from 'ol/proj';
import { MassPoints } from '../utils/MassPoints';
import type { PointStyleType, PointData } from '../utils/MassPoints';

// 声明响应式变量
const mapRef = ref<HTMLElement>();
const map = ref<Map>();
const pointCount = ref(0);
const styleType = ref<PointStyleType>('circle');
const size = ref(8);
const color = ref('#00eaff');
let massPoints: MassPoints;

// 生成随机点数据
function generateRandomPoints(count: number): PointData[] {
  const points: PointData[] = [];
  const center = fromLonLat([116.397428, 39.90923]); // 北京中心点
  const radius = 100000; // 100公里半径

  for (let i = 0; i < count; i++) {
    // 使用极坐标方式生成随机位置
    const angle = Math.random() * Math.PI * 2; // 随机角度
    const r = Math.sqrt(Math.random()) * radius; // 使用平方根使点分布更均匀
    
    // 计算笛卡尔坐标
    const x = center[0] + r * Math.cos(angle);
    const y = center[1] + r * Math.sin(angle);
    
    // 转换回经纬度坐标
    const lonlat = transform([x, y], 'EPSG:3857', 'EPSG:4326');
    
    points.push({
      id: i,
      lon: lonlat[0],
      lat: lonlat[1],
      properties: {
        name: `Point ${i}`
      }
    });
  }
  return points;
}

// 初始化地图
onMounted(() => {
  if (!mapRef.value) return;

  // 创建地图
  map.value = new Map({
    target: mapRef.value,
    layers: [
      // 使用高德地图作为底图
      new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
        })
      })
    ],
    view: new View({
      center: fromLonLat([116.397428, 39.90923]),  // 北京中心
      maxZoom: 18, // 最大缩放级别
      zoom: 9,     // 初始缩放级别调整为9，更好地显示圆形区域
      enableRotation: false,    // 禁用旋转
    })
  });

  // 生成点数据并创建海量点图层
  const points = generateRandomPoints(500000);
  pointCount.value = points.length;

  massPoints = new MassPoints(map.value, points, {
    type: styleType.value,
    size: size.value,
    color: color.value + 'cc'  // 添加透明度
  });

  // 添加图层到地图
  map.value.addLayer(massPoints.getLayer());
});

// 监听样式变化
watch([styleType, size, color], ([newType, newSize, newColor]) => {
  if (!massPoints) return;
  
  massPoints.updateStyle({
    type: newType,
    size: newSize,
    color: newColor + 'cc'  // 添加透明度
  });
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.control-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.control-item label {
  margin-right: 8px;
  min-width: 60px;
}

.control-item select,
.control-item input[type="color"] {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.control-item input[type="range"] {
  flex: 1;
  margin-right: 8px;
}

.point-count {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
</style> 